
const { useState, useEffect, useReducer } = React;

const RepeatButton = props => {
  return React.createElement('button', { ariaLabel: 'Play again.', id: 'repeatButton', onClick: props.onClick });
};

const App = () => {
  const loser = ['Not quite', 'Stop gambling', 'Hey, you lost!', 'Ouch! I felt that', 'Don\'t beat yourself up', 'There goes the college fund', 'I have a cat. You have a loss', 'You\'re awesome at losing', 'Coding is hard', 'Don\'t hate the coder'];
  let [winner, setWinner] = useState(null);
  let matches = [];
  const emptyArray = () => matches = [];
  const finishHandler = value => {
    matches.push(value);
    if (matches.length === 3) {
      let results = matches.every(match => match === matches[0]);
      setWinner(results);
    }
  };
  let children = new Array(3);
  const handleClick = () => {
    setWinner(null);
    emptyArray();
    children.forEach(child => {
      child.forceUpdateHandler();
    });
  };

  const getLoser = () => loser[Math.floor(Math.random() * loser.length)];

  return React.createElement(
    'div',
    null,
    React.createElement(
      'h1',
      { style: { color: 'white' } },
      React.createElement(
        'span',
        null,
        winner === null ? 'Waiting…' : winner ? '🤑 Pure skill! 🤑' : getLoser()
      )
    ),
    React.createElement(
      'div',
      { className: 'spinner-container' },
      React.createElement(Spinner, { onFinish: finishHandler, timer: '1000', ref: child => children[0] = child }),
      React.createElement(Spinner, { onFinish: finishHandler, timer: '1400', ref: child => children[1] = child }),
      React.createElement(Spinner, { onFinish: finishHandler, timer: '2200', ref: child => children[2] = child }),
      React.createElement('div', { className: 'gradient-fade' })
    ),
    winner !== null && React.createElement(RepeatButton, { onClick: handleClick })
  );
};

class Spinner extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      position: 0,
      lastPosition: null
    };
    this.multiplier = Math.floor(Math.random() * (4 - 1) + 1);
    this.start = this.setStartPosition();
    this.speed = this.iconHeight() * this.multiplier;
    this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
  }
  iconHeight() {
    return 188;
  }
  forceUpdateHandler() {
    this.reset();
  }
  reset() {

    if (this.timer) {
      clearInterval(this.timer);

      this.start = this.setStartPosition();

      this.setState({
        position: this.start,
        timeRemaining: this.props.timer
      });

      this.timer = setInterval(() => {
        this.tick();
      }, 100);
    }
  }
  setStartPosition() {
    return Math.floor(Math.random() * 9) * this.iconHeight() * -1;
  }
  moveBackground() {
    this.setState({
      position: this.state.position - this.speed,
      timeRemaining: this.state.timeRemaining - 100
    });
  }
  getSymbolFromPosition() {

    let totalSymbols = 9;
    let maxPosition = this.iconHeight() * (totalSymbols - 1) * -1;
    let moved = this.props.timer / 100 * this.multiplier;
    let startPosition = this.start;
    let currentPosition = startPosition;

    for (var i = 0; i < moved; i++) {
      currentPosition -= this.iconHeight();

      if (currentPosition < maxPosition) {
        currentPosition = 0;
      }
    }

    this.props.onFinish(currentPosition);
  }
  tick() {
    if (this.state.timeRemaining <= 0) {
      clearInterval(this.timer);
      this.getSymbolFromPosition();
    } else {
      this.moveBackground();
    }
  }
  componentDidMount() {

    clearInterval(this.timer);

    this.setState({
      position: this.start,
      timeRemaining: this.props.timer
    });

    this.timer = setInterval(() => {
      this.tick();
    }, 100);
  }
  render() {
    const position = this.state.position;
    return React.createElement('div', { style: { backgroundPosition: '0px ' + position + 'px' }, className: 'icons' });
  }
}

ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
